<template>
  <div>
    <a-modal
      centered
      title="选择业务"
      destroy-on-close
      :maskClosable="false"
      :width="1200"
      v-model="visible"
      :confirm-loading="confirmLoading"
      @ok="onSubmit"
      @cancel="onCancel1"
    >
      <a-checkbox-group
        style="width:100%"
        v-model="businessData"
        @change="onChange"
      >
        <a-spin :spinning="loading">
          <a-tabs type="card">
            <a-tab-pane key="10" tab="商标">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="item in sourceData[10]" :key="item.business_id">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="20" tab="专利">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[20]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="30" tab="版权">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[30]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="40" tab="设计">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[40]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="50" tab="国际">
              <div class="business-checkbox-group">
                <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[50]" :key="index">
                  <a-col :span="24">
                    <span class="group-name">{{ item.name }}</span>
                  </a-col>
                  <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                    <a-checkbox :value="items">
                      <a-tooltip v-if="items.name_desc != ''">
                        <template slot="title">
                          {{ items.name_desc }}
                        </template>
                        <ellipsis :length="30">{{ items.name }}</ellipsis>
                      </a-tooltip>
                      <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                    </a-checkbox>
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
            <a-tab-pane key="60" tab="高新">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[60]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="70" tab="资产">
              <div class="business-checkbox-group">
                <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[70]" :key="index">
                  <a-col :span="24">
                    <span class="group-name">{{ item.name }}</span>
                  </a-col>
                  <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                    <a-checkbox :value="items">
                      <a-tooltip v-if="items.name_desc != ''">
                        <template slot="title">
                          {{ items.name_desc }}
                        </template>
                        <ellipsis :length="30">{{ items.name }}</ellipsis>
                      </a-tooltip>
                      <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                    </a-checkbox>
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
            <a-tab-pane key="80" tab="ISO">
              <div class="business-checkbox-group">
                <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[80]" :key="index">
                  <a-col :span="24">
                    <span class="group-name">{{ item.name }}</span>
                  </a-col>
                  <a-col :span="12" v-for="items in item.data" :key="items.business_id">
                    <a-checkbox :value="items">
                      <a-tooltip v-if="items.name_desc != ''">
                        <template slot="title">
                          {{ items.name_desc }}
                        </template>
                        <ellipsis :length="80">【{{ epOpts[items.enterprise_persons] }}】【{{ atOpts[items.auth_type] }}】【{{ riOpts[items.risk] }}】{{ items.name }}</ellipsis>
                      </a-tooltip>
                      <ellipsis v-else :length="80">[{{ epOpts[items.enterprise_persons] }}][{{ atOpts[items.auth_type] }}][{{ riOpts[items.risk] }}]{{ items.name }}</ellipsis>
                    </a-checkbox>
                  </a-col>
                </a-row>
              </div>
            </a-tab-pane>
            <a-tab-pane key="90" tab="国际商标">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[90]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="100" tab="国际专利">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[100]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="110" tab="3A">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[110]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="120" tab="400">
              <div class="business-checkbox-group">
                <div
                  class="b_group"
                >
                  <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[120]" :key="index">
                    <a-col :span="24">
                      <span class="group-name">{{ item.name }}</span>
                    </a-col>
                    <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                      <a-checkbox :value="items">
                        <a-tooltip v-if="items.name_desc != ''">
                          <template slot="title">
                            {{ items.name_desc }}
                          </template>
                          <ellipsis :length="30">{{ items.name }}</ellipsis>
                        </a-tooltip>
                        <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                      </a-checkbox>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="300" tab="其他">
              <div class="business-checkbox-group">
                <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[300]" :key="index">
                  <a-col :span="24">
                    <span class="group-name">{{ item.name }}</span>
                  </a-col>
                  <a-col :span="6" v-for="items in item.data" :key="items.business_id">
                    <a-checkbox :value="items">
                      <a-tooltip v-if="items.name_desc != ''">
                        <template slot="title">
                          {{ items.name_desc }}
                        </template>
                        <ellipsis :length="30">{{ items.name }}</ellipsis>
                      </a-tooltip>
                      <ellipsis v-else :length="30">{{ items.name }}</ellipsis>
                    </a-checkbox>
                  </a-col>
                </a-row>
                <!--                    <a-row :gutter="[0, 20]" v-for="(item, index) in sourceData[300]" :key="index">-->
                <!--                      <a-col :span="24">-->
                <!--                        <span class="group-name">{{item.name}}</span>-->
                <!--                      </a-col>-->
                <!--                      <a-col :span="6" v-for="items in item.data" :key="items.business_id">-->
                <!--                        <a-checkbox :value="items">-->
                <!--                          <ellipsis :length="30" tooltip>{{items.name}}</ellipsis>-->
                <!--                        </a-checkbox>-->
                <!--                      </a-col>-->
                <!--                    </a-row>-->
              </div>
            </a-tab-pane>
          </a-tabs>
          <a-divider />
          <a-table
            bordered
            size="middle"
            :row-key="(record) => record.business_id"
            :columns="businessColumns"
            :data-source="businessData"
          >
            <template slot="contract_index" slot-scope="text, record, index">
              {{ index + 1 }}
            </template>
            <template slot="category" slot-scope="text">
              {{ catOptions[text] }}
            </template>
            <template v-for="col in ['offer_section_lft', 'bus_num']" :slot="col" slot-scope="text, record">
              <div :key="col">
                <a-input-number
                  :default-value="col == 'offer_section_lft' ? parseInt(record.offer_section_lft) : record.bus_num"
                  :value="col == 'offer_section_lft' ? parseInt(record.offer_section_lft) : record.bus_num"
                  :min="1"
                  @change="e => handleChange(e, record.business_id, col)"
                />
              </div>
            </template>
            <template slot="row_num" slot-scope="text,record">
              {{ record.offer_section_lft * record.bus_num }}
            </template>
            <template slot="action" slot-scope="text, record, index">
              <a-button style="margin-right:5px" type="danger" size="small" @click="delItem(index)">删除</a-button>
              <a-button type="primary" size="small" @click="addItem(record.business_id, record.name, record.bus_num)">增项</a-button>
            </template>
            <template slot="footer">
              <div class="tb-footer">
                ￥{{ amount }}
              </div>
            </template>
          </a-table>
        </a-spin>
      </a-checkbox-group>
    </a-modal>
    <ext-modal v-if="addVisible" :business-id="addForm.business_id" :business-name="addForm.business_name" :business-num="addForm.business_num" @cancel="onCancel"></ext-modal>
  </div>
</template>

<script>
  import { Ellipsis } from '@/components'
  import ExtModal from '@/views/contract/components/ExtModal'
  import contractColumns from '@/columns/contract'
  import { getBusiness } from '@/api/contract'

  export default {
    components: {
      Ellipsis,
      ExtModal
    },
    name: 'SelectBusiness',
    data () {
      return {
        loading: false,
        addVisible: false,
        addForm: {},
        confirmLoading: false,
        sourceData: [],
        businessColumns: contractColumns.business,
        businessData: [],
        visible: true
      }
    },
    created () {
      this.getList()
    },
    methods: {
      handleChange (value, key, column) {
        const app = this
        const newBusiness = [...app.businessData]
        const target = newBusiness.filter(item => key === item.business_id)[0]
        if (target) {
          target[column] = value
          app.businessData = newBusiness
        }
      },
      getList () {
        const app = this
        app.loading = true
        app.businessData = []
        getBusiness().then(res => {
          const result = res.result['businesses']
          app.catOptions = res.result['category_opts']
          app.riOpts = res.result['riOpts']
          app.epOpts = res.result['epOpts']
          app.atOpts = res.result['atOpts']
          const target = {}
          if (res.status === 0) {
            for (const k in result) {
              if (result[k].data.hasOwnProperty('')) {
                target[k] = result[k].data[''].data
              } else {
                target[k] = result[k].data
              }
            }
            app.sourceData = target
            app.loading = false
          }
        })
      },
      addItem (id, name, num) {
        this.addForm['business_id'] = id
        this.addForm['business_name'] = name
        this.addForm['business_num'] = num
        this.addVisible = true
      },
      onChange (checkedValues) {
        const businessData = this.businessData
        for (const k in checkedValues) {
          businessData[k] = checkedValues[k]
          if (!businessData[k].bus_num) businessData[k].bus_num = 1
        }
      },
      onSubmit () {
        this.$emit('submit', this.businessData)
      },
      onCancel (visible) {
        this.addVisible = visible
      },
      onCancel1 () {
        this.visible = false
        this.$emit('cancel', this.visible)
      }
    },
    computed: {
      amount () {
        let total = 0
        for (const k in this.businessData) {
          total += this.businessData[k].offer_section_lft * this.businessData[k].bus_num
        }
        return total
      }
    }
  }
</script>

<style scoped>
  .business-checkbox-group {
    height: 300px;
    overflow-y: scroll;
    overflow-x: hidden
  }
  .group-name {
    background-color: #eee;
    font-weight: bold;
    padding: 5px 10px
  }
  .b_group {
    width: 100%;
    padding: 15px 15px 0 15px
  }
  .tb-footer {
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    color: #f00
  }
  .tb-footer2 {
    text-align: right;
    font-size: 14px;
    color: #f00
  }
</style>
